$fontColor: #606266;
$borderColor: #ebeef5;

@mixin border_1px($color) {
  & {
    position: relative;
    &:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      border-bottom: 1px solid $color !important;
      border-right: 1px solid $color !important;
      transform-origin: 0 0;
      padding: 1px;
      box-sizing: border-box;
      pointer-events: none;
    }
    &:last-child:before {
      border-bottom: none;
    }
  }
  @media (-webkit-min-device-pixel-ratio: 1), (min-device-pixel-ratio: 1) {
    &:before {
      width: 100%;
      height: 100%;
      transform: scale(1);
    }
  }
  @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
    &:before {
      width: 200%;
      height: 200%;
      transform: scale(0.5);
    }
  }
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    &:before {
      width: 300%;
      height: 300%;
      transform: scale(0.333);
    }
  }
}

.vue-tabulation {
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  font-size: 12px;
  color: $fontColor;
  background: #fff;
  table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    box-sizing: border-box;
    table-layout: fixed;
  }
  input[type='checkbox'] {
    width: 12px;
    height: 12px;
  }
  tr:hover {
    background-color: #f5f7fa;
  }
  th {
    font-size: 12px;
    font-weight: inherit;
    color: $default-color;
  }
  th,
  td {
    @include border_1px(#ebeef5);
    padding: 8px 8px;
    min-width: 0;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
    background: #fff;
    height: 40px;
    max-width: 0;
    line-height: 1.4;
    &:last-child {
      border-right: none;
    }
    &.is-center {
      text-align: center;
    }
    &.is-right {
      text-align: right;
    }
    & .cell {
      word-break: break-all;
    }
  }
  .vue-tabulation-body-tr--checked {
    th,
    td {
      background-color: #f5f7fa;
    }
  }
  &.vue-tabulation--border .vue-tabulation__gutter {
    background: #fff;
    border: 0;
  }
  .vue-tabulation__header-wrapper,
  .vue-tabulation__summary-wrapper {
    position: relative;
  }
  .vue-tabulation__body-wrapper {
    position: relative;
    overflow: auto;
  }
  &.vue-tabulation--scrollable-y .vue-tabulation__body-wrapper {
    overflow-y: auto;
  }
  &.vue-tabulation--scrollable-x .vue-tabulation__body-wrapper {
    overflow-x: auto;
  }
  .vue-tabulation__header--fixed-left,
  .vue-tabulation__body--fixed-left,
  .vue-tabulation__summary--fixed-left {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    box-shadow: 4px 0px 6px -5px rgba(0, 0, 0, 0.23);
  }
  .vue-tabulation__header--fixed-right,
  .vue-tabulation__body--fixed-right,
  .vue-tabulation__summary--fixed-right {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    box-shadow: 4px 0px 6px -5px rgba(0, 0, 0, 0.23);
  }
  // 边框样式
  &.vue-tabulation--border {
    th,
    td {
      border: 1px solid $borderColor;
    }
  }
  // 表头查询
  .HeaderCellSort {
    cursor: pointer;
    .caret-wrapper {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      height: 22px;
      width: 16px;
      vertical-align: middle;
      cursor: pointer;
      overflow: initial;
      position: relative;
      .sort-caret {
        width: 0;
        height: 0;
        border: 5px solid transparent;
        &.ascending {
          border-bottom-color: #c0c4cc;
          &.active {
            border-bottom-color: $default-color;
          }
        }
        &.descending {
          border-top-color: #c0c4cc;
          &.active {
            border-top-color: $default-color;
          }
        }
      }
    }
  }
  // 无数据
  .vue-tabulation__no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
}
